<template>
  <view class="container">
    <u-form :model="form" ref="form" :label-width="250">
      <u-form-item label="姓名" prop="name">
        <u-input v-model="form.name" disabled placeholder=""/>
      </u-form-item>
      <u-form-item label="身份证" prop="idCard">
        <u-input v-model="form.idCard" disabled placeholder=""/>
      </u-form-item>
      <u-form-item label="入职类型" prop="inductionDesc">
        <u-input v-model="form.inductionDesc" disabled placeholder=""/>
      </u-form-item>

      <u-form-item v-show="canUpload && rules.holdIdCardImages[0].required" label="手持身份证照片" prop="holdIdCardImages" :required="rules.holdIdCardImages[0].required">
        <view v-show="showHandIdCardImgPreview" class="preview-wrapper">
          <u-icon style="position: absolute;top:4px;right: 4px;z-index: 1;" class="preview-del-icon"
                  name="close-circle-fill" color="#FA3534" size="52"
                  @click="onHandIdCardImgDelete"/>
          <u-image class="pre-item-image" :src="form.holdIdCardImages" width="160"
                   height="160"
                   mode="aspectFill"/>
        </view>
        <u-upload v-show="!showHandIdCardImgPreview" width="160" height="160" :auto-upload="false" max-count="1"
                  @on-choose-complete="onHandIdCardChooseCallback" ref="handIdCardUpload"></u-upload>
      </u-form-item>

      <u-form-item v-show="canUpload && rules.signDocumentImg[0].required" label="文件签署照片" prop="signDocumentImg" :required="rules.signDocumentImg[0].required">
        <view v-show="showSignDocumentImgPreview" class="preview-wrapper">
          <u-icon style="position: absolute;top:4px;right: 4px;z-index: 1;" class="preview-del-icon"
                  name="close-circle-fill" color="#FA3534" size="52"
                  @click="onSignDocumentImgDelete"/>
          <u-image class="pre-item-image" :src="form.signDocumentImg"
                   width="160" height="160"
                   mode="aspectFill"/>
        </view>
        <u-upload v-show="!showSignDocumentImgPreview" width="160" height="160" :auto-upload="false" max-count="1"
                  @on-choose-complete="onSignDocumentImgChooseCallback" ref="handSignDocumentImgUpload"></u-upload>
      </u-form-item>

      <u-form-item v-show="canUpload && rules.idCardBadgeImages[0].required" label="身份证人像面照片" prop="idCardBadgeImages" :required="rules.idCardBadgeImages[0].required">
        <view v-show="showIdCardBadgeImgPreview" class="preview-wrapper">
          <u-icon style="position: absolute;top:4px;right: 4px;z-index: 1;" class="preview-del-icon"
                  name="close-circle-fill" color="#FA3534" size="52"
                  @click="onIdCardBadgeImgDelete"/>
          <u-image class="pre-item-image" :src="form.idCardBadgeImages"
                   width="160" height="160"
                   mode="aspectFill"/>
        </view>
        <u-upload v-show="!showIdCardBadgeImgPreview" width="160" height="160" :auto-upload="false" max-count="1"
                  @on-choose-complete="onIdCardBadgeImgCallback" ref="handIdCardBadgeImgUpload"></u-upload>
      </u-form-item>

      <u-form-item v-show="canUpload && rules.idCardPortraitImages[0].required" label="身份证国徽面照片" prop="idCardPortraitImages" :required="rules.idCardPortraitImages[0].required">
        <view v-show="showIdCardPortraitImgPreview" class="preview-wrapper">
          <u-icon style="position: absolute;top:4px;right: 4px;z-index: 1;" class="preview-del-icon"
                  name="close-circle-fill" color="#FA3534" size="52"
                  @click="onIdCardPortraitImgDelete"/>
          <u-image class="pre-item-image" :src="form.idCardPortraitImages"
                   width="160" height="160"
                   mode="aspectFill"/>
        </view>
        <u-upload v-show="!showIdCardPortraitImgPreview" width="160" height="160" :auto-upload="false" max-count="1"
                  @on-choose-complete="onIdCardPortraitImgCallback" ref="handIdCardPortraitImgUpload"></u-upload>
      </u-form-item>
    </u-form>

    <view class="btn-box">
      <u-button v-show="canUpload" type="primary" shape="square" :ripple="true" size="medium" @click="submit" class="custom-btn"
      >提交
      </u-button
      >
      <u-button v-show="!canUpload" type="primary" shape="square" :ripple="true" size="medium" class="custom-btn"
      >请完成入职后再上传资料
      </u-button
      >
    </view>
  </view>
</template>

<script>
import {compressImg} from '@/utils/compressor/compress.js'
import {uploadImg} from '@/utils/upload.js'

export default {
  data() {
    return {
      form: {
        // 姓名
        name: '',
        // 身份证
        idCard: '',
        // 入职类型
        inductionType: null,
        // 入职类型描述
        inductionDesc: null,
        // 手持身份证照片
        holdIdCardImages: '',
        // 文件签署照片
        signDocumentImg: '',
        // 身份证照片(人像面)
        idCardBadgeImages: '',
        // 身份证照片(国徽面)
        idCardPortraitImages: '',
      },
      // 是否预览手持身份证照片
      showHandIdCardImgPreview: false,
      // 是否预览文件签署图片
      showSignDocumentImgPreview: false,
      // 是否预览身份证人像面
      showIdCardBadgeImgPreview: false,
      // 是否预览身份证国徽面
      showIdCardPortraitImgPreview: false,
      // 是否可补充资料
      canUpload: false,
      rules: {
        holdIdCardImages: [
          {
            required: true,
            message: "请上传手持身份证照片",
            trigger: ["change"],
          },
        ],
        signDocumentImg: [
          {
            required: true,
            message: "请上传文件签署照片",
            trigger: ["change"],
          },
        ],
        idCardBadgeImages: [
          {
            required: true,
            message: "请上传身份证人像面照片",
            trigger: ["change"],
          },
        ],
        idCardPortraitImages: [
          {
            required: true,
            message: "请上传身份证国徽面照片",
            trigger: ["change"],
          },
        ]
      }
    };
  },
  components: {},
  methods: {
    // 初始化表单配置
    initFormConfig() {
      // 根据骑手和运营人员显示不同的图片上传操作
      if (this.form.inductionType === 1) {
        this.rules.holdIdCardImages[0].required = true
        this.rules.signDocumentImg[0].required = true
        this.rules.idCardBadgeImages[0].required = false
        this.rules.idCardPortraitImages[0].required = false
      } else if (this.form.inductionType === 2) {
        this.rules.holdIdCardImages[0].required = false
        this.rules.signDocumentImg[0].required = false
        this.rules.idCardBadgeImages[0].required = true
        this.rules.idCardPortraitImages[0].required = true
      }
    },
    // 手持身份证照片选择后回调
    onHandIdCardChooseCallback(lists) {
      // 压缩图片
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "holdIdCardImages")
        }
      })
    },
    // 签署文件照片选择后回调
    onSignDocumentImgChooseCallback(lists) {
      // 压缩图片
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "signDocumentImg")
        }
      })
    },
    // 身份证人像面选择后回调
    onIdCardBadgeImgCallback(lists){
      // 压缩图片
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "idCardBadgeImages")
        }
      })
    },
    // 身份证国徽面选择后回调
    onIdCardPortraitImgCallback(lists) {
      // 压缩图片
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "idCardPortraitImages")
        }
      })
    },
    // 上传图片
    async uploadPic(file, name) {
      try {
        const res = await uploadImg(file)
        this.$set(this.form, name, res.fileName);
      } catch (e) {
      }
    },
    // 提交
    async submit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return
        }
        const res = await this.$api.riders.submitAdditionalMaterial(this.form);
        if (res.code === 200) {
          uni.showToast({
            title: res.msg,
            icon: "success",
          });
          await this.getAdditionalMaterial()
        } else {
          uni.showToast({
            title: res.msg,
            icon: "error",
          });
        }
      });
    },
    // 获取补充资料
    async getAdditionalMaterial() {
      const res = await this.$api.riders.getAdditionalMaterial();
      if (res && res.data) {
        this.canUpload = true
        this.form.name = res.data.idCardName
        this.form.idCard = res.data.idCardNo
        this.form.inductionType = res.data.inductionType
        this.form.inductionDesc = res.data.inductionType === 1 ? '骑手' : '运营人员'
        this.initFormConfig()
        if (res.data.holdIdCardImages) {
          this.showHandIdCardImgPreview = true
          this.form.holdIdCardImages = res.data.holdIdCardImages
        }
        if (res.data.signDocumentImg) {
          this.showSignDocumentImgPreview = true
          this.form.signDocumentImg = res.data.signDocumentImg
        }
        if (res.data.idCardBadgeImages) {
          this.showIdCardBadgeImgPreview = true
          this.form.idCardBadgeImages = res.data.idCardBadgeImages
        }
        if (res.data.idCardPortraitImages){
          this.showIdCardPortraitImgPreview = true
          this.form.idCardPortraitImages = res.data.idCardPortraitImages
        }
      }
    },
    // 删除手持身份证
    onHandIdCardImgDelete() {
      this.form.holdIdCardImages = null
      this.showHandIdCardImgPreview = false
    },
    // 删除文件签署身份证
    onSignDocumentImgDelete() {
      this.form.signDocumentImg = null
      this.showSignDocumentImgPreview = false
    },
    // 删除身份证人像面
    onIdCardBadgeImgDelete() {
      this.form.idCardBadgeImages = null
      this.showIdCardBadgeImgPreview = false
    },
    // 删除身份证国徽面
    onIdCardPortraitImgDelete() {
      this.form.idCardPortraitImages = null
      this.showIdCardPortraitImgPreview = false
    }
  },
  computed: {},
  mounted() {
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.form.setRules(this.rules);
    this.getAdditionalMaterial()
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;

  .preview-wrapper {
    position: relative;
  }

  .pre-item-image {
    .preview-del-icon {

    }
  }

  .btn-box {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
